<template>
	 <view class="container">
	
		<view class="header">
			
			<view class="img">
				<image src="../../static/mayun.jpg" class="image" mode="scaleToFill"></image>
			</view>
			<text>不忘初心</text>
			<text>今日定，今日达今日定，今日达</text>
			<i class="iconfont iconshezhi1 setting" @click="setting"></i>
		</view>
		

		
		<view class="content">
			<view class="dingdan" v-for="i in 2" :key="i">
				<view class="title">
					<text>我的订单</text>
					<text @click="click_order_all">查看全部订单</text>
				</view>
				<view class="wrap">
					<view class="item" @click="click_item('1')">
						<image src="../../static/icon/daifukuan.png" mode="aspectFit" class="img"></image>
						<text>待付款</text>
					</view>
					<view class="item" @click="click_item('1')">
						<image src="../../static/icon/daipeisong.png" mode="aspectFit" class="img"></image>
						<text>待配送</text>
					</view>
					<view class="item" @click="click_item('1')">
						<image src="../../static/icon/yiwancheng.png" mode="aspectFit" class="img"></image>
						<text>已完成</text>
					</view>
					<view class="item" @click="click_item('1')">
						<image src="../../static/icon/pingjia.png" mode="aspectFit" class="img"></image>
						<text>待评论</text>
					</view>
					<view class="item" @click="click_item('1')">
						<image src="../../static/icon/shouhou.png" mode="aspectFit" class="img"></image>
						<text>退款/售后</text>
					</view>
					
				</view>
			</view>
	 
	 
		</view>
	 </view>
 
</template>

<script>
 
	export default {
		data() {
			return {
		 
			}
		},
		methods:{
			//点击查看全部订单
			click_order_all(){
				uni.navigateTo({
					url:'../orderAll/orderAll'
				})
			},
			click_item(index){
				uni.navigateTo({
					url:'../orderAll/orderAll'
				})
			},
			//设置按钮
			setting(){
				uni.reLaunch({
					url:"../login/login"
				})
			}
			
		}
		
   
	}
</script>

<style>
 
	 .container{
		 
	 }
	 .header{
		 
		 width: 100%;
		 height: 600rpx;
		 /* background-color: #fbbd08; */
		 background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		 display: flex;
		 flex-direction: column;
	 
		 align-items: center;
	 }
	 .header .img{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin-bottom: 20rpx;
	 }
	 .header .img .image{
		width: 100%;
		height: 100%;
		 
	 }
	 .header text{
		 color: #FFFFFF;
		 font-size: 26rpx;
	 }
	 .header text:last-child{
		 font-size: 20rpx;
		 margin-top: 10rpx;
	 }
	 .setting{
		 align-self: flex-end;
		  position: absolute;
		  top: 40rpx;
		  right: 40rpx;
 
		 color: #FFFFFF;
		 font-size: 60rpx;
	
		 
	 }
	 
	 .content{
		
		margin: 0 20rpx;
		margin-top: -200rpx;
		
	 }
	 .content .dingdan{
		/* height: 200rpx; */
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	 }
	 
	 .content .title{
		 font-size: 33rpx;
		 font-weight: 900;
		 
	 }
	  .content .title text:last-child{
		  font-size: 20rpx;
		  color: #999;
		  font-weight: 400;
		  float: right;
	  }
	  .content .dingdan .wrap{
		  display: flex;
		  justify-content: space-around;
		  margin: 30rpx 0;
		  
	  }
	  .content .dingdan .wrap .item{
		  display: flex;
		  flex-direction: column;
		  align-items: center;
	  }
	 .content .dingdan .wrap .item .img{
		  width: 60rpx;
		  height: 60rpx;
	 }
	  .content .dingdan .wrap .item text{
		  font-weight: 20rpx;
		  color: #000000;
			margin-top: 20rpx;
	  }
 
</style>
